<template>
  <div>
    <div class="zong">
      <div class="zhu">
        <div class="zhuheader">
          考核列表
          <el-button type="danger" class="xinjian">新建任务</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column label="任务编号" width="110">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" circle>{{
                scope.row.itemNumber
              }}</el-button>
            </template>
          </el-table-column>
          真烦，一点不想写，哭死，还被说，还被吼
          <el-table-column label="建立时间" width="110">
            <template slot-scope="scope">
              {{ scope.row.startingTime }}
            </template>
          </el-table-column>
          <el-table-column prop="deadline" label="起始-截止时间" width="110">
            <template slot-scope="scope">
              {{ scope.row.startingTime }}-<br />
              {{ scope.row.deadline }}
            </template>
          </el-table-column>
          <el-table-column label="项目考核" width="110">
            <template slot-scope="scope">
              <el-button
                class="btnkk"
                @click="gotoproject(scope.row.itemNumber)"
                >{{
                  scope.row.projectCheckId == 0
                    ? "进行中"
                    : scope.row.projectCheckId == 1
                    ? "暂停中"
                    : "已完成"
                }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="部门考核" width="110">
            <template slot-scope="scope">
              <el-button
                class="btnkk"
                @click="gotodept(scope.row.itemNumber)"
                >{{
                  scope.row.departmentAppId == 0
                    ? "进行中"
                    : scope.row.departmentAppId == 1
                    ? "暂停中"
                    : "已完成"
                }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="update(scope.row)"
                :disabled="scope.row.pigeonhole == 1"
                >修改</el-button
              >
              <el-button
                type="danger"
                size="mini"
                @click="del(scope.row.itemNumber)"
                :disabled="scope.row.pigeonhole == 1"
                >删除</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="归档" width="110">
            <template slot-scope="scope">
              <el-button
                type="warning"
                size="small"
                @click="gui(scope.row.itemNumber)"
                :disabled="scope.row.pigeonhole == 1"
                >{{
                  scope.row.pigeonhole == 0 ? "发起归档" : "已归档"
                }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="zhu2">
        <div class="zhuheader2">任务编辑</div>
        <table>
          <tr>
            <td>任务编号：</td>
            <td>
              <el-input
                v-model="addData.itemNumber"
                placeholder="请输入内容"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td>起始时间：</td>
            <td>
              <el-date-picker
                v-model="addData.startingTime"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </td>
          </tr>
          <tr>
            <td>截止时间：</td>
            <td>
              <el-date-picker
                v-model="addData.deadline"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </td>
          </tr>
          <tr>
            <td>备注信息：</td>
            <td>
              <el-input
                v-model="addData.postscript"
                placeholder="请输入内容"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td>项目考核：</td>
            <td>
              <el-select
                v-model="addData.projectCheckId"
                clearable
                placeholder="请选择"
              >
                <el-option label="进行中" :value="0">进行中 </el-option>
                <el-option label="暂停中" :value="1">暂停中 </el-option>
                <el-option label="已完成" :value="2">已完成 </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td>部门考核：</td>
            <td>
              <el-select v-model="addData.departmentAppId" placeholder="请选择">
                <el-option label="进行中" :value="0">进行中 </el-option>
                <el-option label="暂停中" :value="1">暂停中 </el-option>
                <el-option label="已完成" :value="2">已完成 </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td>
              <el-button type="danger" @click="add">保存</el-button>
              <el-button type="danger" @click="xiugai">修改</el-button>
            </td>
            <td></td>
          </tr>
        </table>
      </div>
    </div>

    <div class="zhu">
      <div class="zhuheader">考核统计</div>
      <el-table :data="totalData" style="width: 100%">
        <el-table-column prop="aNumber" label="考核任务">
          <template slot-scope="scope">
            {{ scope.row.aNumber }}
          </template>
        </el-table-column>
        <el-table-column label="技术部门(非股东)项目奖金+部门内奖金计算">
          <el-table-column prop="jiSuan" label="实际发放/系统计算值">
            <template slot-scope="scope">
              {{ scope.row.jiSuan }}
            </template>
          </el-table-column>
          <el-table-column prop="stating" label="初始录入">
            <template slot-scope="scope">
              {{ scope.row.stating }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="total"
          label="技术部门(非股东)平均月工资合计(元)"
        >
          <template slot-scope="scope">
            {{ scope.row.total }}
          </template>
        </el-table-column>
        <el-table-column
          prop="avg"
          label="奖金基数=(项目奖金+部门内奖金)/平均月工资"
        >
          <template slot-scope="scope">
            {{ scope.row.avg }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      totalData: [],
      addData: {
        itemNumber: 0,
        startingTime: "",
        deadline: "",
        postscript: "",
        projectCheckId: "",
        departmentAppId: "",
        pigeonhole: 0,
      },
    };
  },
  methods: {
    //显示考核任务
    show() {
      this.$axios
        .get(
          "http://localhost:20932/api/SystemManager/Performance/ShowTheAssessmentTask"
        )
        .then((res) => {
          this.tableData = res.data;
        });
    },
    //显示考核统计
    shows() {
      this.$axios
        .get(
          "http://localhost:20932/api/SystemManager/Performance/ShowAssessmentTotal"
        )
        .then((res) => {
          this.totalData = res.data;
        });
    },
    //删除考核任务
    del(itennumber) {
      if (confirm("确定删除吗？")) {
        this.$axios
          .delete(
            "http://localhost:20932/api/SystemManager/Performance/DelTheAssessmentTask?id=" +
              itennumber
          )
          .then((res) => {
            if (res.data.Code > 0) {
              if (res.data.Code > 0) {
                this.$message.success("删除成功");
                this.show();
              } else {
                this.$message.error();
                ("删除失败");
              }
            }
          });
      }
    },
    //添加考核任务
    add() {
      this.$axios
        .post(
          "http://localhost:20932/api/SystemManager/Performance/AddTheAssessmentTask",
          this.addData
        )
        .then((res) => {
          if (res.data.Code > 0) {
            this.$message.success("添加成功");
            this.show();
          } else {
            this.$message.error("添加失败");
          }
        });
    },
    //修改考核任务
    xiugai() {
      this.$axios
        .put(
          "http://localhost:20932/api/SystemManager/Performance/UpdateTheAssessmentTask",
          this.addData
        )
        .then((res) => {
          if (res.data.Code > 0) {
            this.$message.success("修改成功");
            this.show();
          } else {
            this.$message.error("修改失败");
          }
        });
    },
    //编辑考核任务
    update(row) {
      this.addData = [];
      this.addData = row;
    },
    //归档
    gui(row) {
      this.$axios
        .put(
          "http://localhost:20932/api/SystemManager/Performance/UpdateGuiDang?id=" +
            row
        )
        .then((res) => {
          this.$confirm("确定要归档考核数据?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              if (res.data.Code > 0) {
                this.$message({
                  type: "success",
                  message: "归档成功",
                });
                this.show();
              } else {
                this.$message({
                  type: "error",
                  message: "归档失败",
                });
              }
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        });
    },
    //跳到部门考核
    gotodept(row) {
      this.$router.push("/deptAssess/" + row);
    },
    //跳到项目考核
    gotoproject(row) {
      this.$router.push("/sheZhiAssessment/" + row);
    },
  },
  created() {
    this.show();
    this.shows();
  },
};
</script>

<style scoped>
.zhu {
  width: 55%;
  height: 100%;
  float: left;
  margin-bottom: 50px;
}
.zhu2 {
  width: 40%;
  height: 100%;
  margin-left: 60%;
}
.zhuheader2 {
  width: 100%;
  height: 40px;
  background-color: blue;
  color: white;
  text-align: left;
  white-space: nowrap;
}
.zhuheader {
  width: 100%;
  height: 40px;
  color: white;
  text-align: left;
  white-space: nowrap;
  background-color: blue;
}
.zong {
  width: 100%;
  height: 100%;
}
table td {
  border: 1px solid #ccc;
  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
}
table {
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
}
.btnkk {
  border-left: 3px solid blue;
  border-top: none;
  border-bottom: none;
  border-right: none;
  background-color: #ccc;
}
.xinjian {
  margin-left: 75%;
}
</style>